<template>
	<view>
		<!-- 滚动条 -->
		<scroll-view scroll-x="true" class="scroll-content" @scrolltolower="loadMore()">
			<view
				class="scroll-item"
				v-for="(item,index) in topBar"
				:key="index"
				@tap='changeTab(index,item.id)'
			>
				<text :class='topBarIndex===index ? "f-active-color" : "none"' >{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- 商品展示 -->
		<view class="shop-content">
			<view v-for="(item,index) in dataList" class="good-item" @click="goOrderDetail(item.id)">
				<view class="good-image">
					<image :src="item.url"></image>
				</view>
				<view class="good-text">
					<text>订单号 ： {{item.id}}</text>
					<text>商品内容： {{item.shopNames}}</text>
					<text>价格：{{item.price}}￥</red></text>
					<text>商品状态 ： {{item.state}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderUtil from '@/common/api/order/order.js'
	export default {
		data() {
			return {
				//默认选中索引
				defaultType:'',
				topBarIndex:0,
				topBar:[
					{name:'全部订单',id:'6'},
					{name:'待付款',id:'0'},
					{name:'已付款',id:'1'},
					{name:'待收货',id:'3'},
					{name:'完成',id:'4'},
					{name:'取消',id:'5'}
					],
				dataList:[]
			}
		},
		onLoad:function(options){
				this.changeTab(options.type-1,this.topBar[options.type-1].id);
		},
		mounted() {
		},
		methods: {
			//更换页面切换数据
			changeTab(index,id){
				this.topBarIndex = index;
				orderUtil.getOrderByType(id)
					.then(res=>{
						this.dataList = res.data.data;
						console.log(this.dataList)
					})
				console.log('查询id类型 ：'+id+" 成功");
			},
			loadMore(index){
				console.log('到底了');
			},
			goOrderDetail(id){
				uni.navigateTo({
					url:'/pages/orderDetail/orderDetail?id='+id
				})
			}
		}
	}
</script>

<style>

.scroll-content{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 38rpx;
}
.f-active-color{
	padding: 10rpx 0;
	color: #c02c38;
	border-bottom: 6rpx solid #c02c38;
}
.load-text{
	width: 100%;
	border-top: 2px solid #c02c38;
	line-height: 60rpx;
	text-align: center;
	color: #66ccff;
}
.shop-content{
}
.good-item{
	margin-bottom: 40rpx;
	display: flex;
	height: 20%;
}
.good-image{
	padding-left: 20rpx;
	padding-right: 20rpx;
	height: 200rpx;
	width: 200rpx;
}
.good-image image{
	height: 200rpx;
	width: 200rpx;
}
.good-text text{
	float: left;
}
</style>
